<script>
export default {
    components: {},
    data() {
        return {
            userName: "翟玉龙",
            HeaderList: [
                {
                    path: "/home",
                    title: "首页"
                },
                {
                    path: "/detail",
                    title: "消费者业务网站"
                },
                {
                    title: "优购码"
                },
                {
                    title: "企业商用"
                },
                {
                    title: "Select Region"
                }
            ]
        };
    },
    computed: {},
    watch: {},
    methods: {
        GoTo(path) {
            this.$router.push({ path: path }, () => { })
        }
    },
    created() {

    },
    mounted() {

    },
}
</script>

<template>
    <div class="wrapper-header">
        <div class="header-left">
            <div class="sp">首页</div>
            <div class="sp">消费者业务网站</div>
            <div class="sp">优购码
            </div>
            <div class="sp">企业商用</div>
            <div class="sp">Select Region</div>
            <div>
                <div class="sp">更多精彩</div>
            </div>
        </div>
        <div class="header-right">
            <div class="sp">请登录</div>
            <div class="sp">注册</div>
            <div class="sp">我的订单</div>
            <div class="sp">客服</div>
            <div class="sp">网站导航</div>
            <div class="sp">手机版</div>
        </div>
    </div>
</template>



<style lang='scss' scoped>
.wrapper-header {
    position: relative;
    width: 100%;
    height: 35px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    align-items: center;

    .header-left {
        position: relative;
        width: 30%;
        height: 100%;
        line-height: 35px;
        text-align: center;

        .sp {
            cursor: pointer;
            float: left;
            margin-left: 20px;
            text-align: center;
            position: relative;
            color: white;
            text-decoration: none;
            font-size: 12px;
            color: #718f99;
        }

        .sp:hover {
            color: #b52f71;
        }

        .sp::before {
            content: '';
            width: 1px;
            height: 10px;
            display: block;
            position: absolute;
            top: 13px;
            right: -16%;
            background: #414141;
        }
    }

    .header-right {
        position: relative;
        width: 30%;
        height: 100%;
        line-height: 35px;
        text-align: center;

        .sp {
            cursor: pointer;
            float: left;
            margin-left: 20px;
            text-align: center;
            position: relative;
            color: white;
            text-decoration: none;
            font-size: 12px;
            color: #718f99;
        }

        .sp:hover {
            filter: brightness(1.2);
            color: #b52f71;
        }

        .sp::before {
            content: '';
            width: 1px;
            height: 10px;
            display: block;
            position: absolute;
            top: 13px;
            right: -25%;
            background: #414141;
        }

        .spp {
            position: relative;
            z-index: 10;
            color: #718f99;
            display: flex;
            align-items: center;
            margin-left: 20px;
            float: left;
            width: 90px;
            height: 100%;
            background: #424242;

            svg {
                margin-left: 5px;
            }
        }

        .spp:hover svg path {
            fill: #cf0a2c;
        }

        .spp:hover {
            background: #fff;
        }

        .spp:hover a {
            color: #cf0a2c;
        }
    }
}
</style>